<template>
  <div>
    <!-- <child :list='ary' /> -->
    <button @click="flag = !flag">666</button>
    <!-- :include="/a/"  意思就是说 只缓存哪些 name中包含a的组件 ；  exclude用法一样 意思相反-->
    <!-- :include="['aaa']"  意思就是说 只缓存哪些 name是 aaa 的组件 -->
    <keep-alive :include="/a/">
      <AAA v-if="flag" />
      <BBB v-else />
    </keep-alive>

  </div>
</template>
<script>
// @ is an alias to /src
import child from './components3/child'
import AAA from './components3/AAA'
import BBB from './components3/BBB'
export default {
  name: 'XXX',
  data() {
    return {
      flag: true,
      ary: [
        {
          til: '1',
          children: [
            {
              til: '1-1'
            },
            {
              til: '1-2',
              children: [
                {
                  til: '1-2-1',
                  children: [
                    {
                      til: '1-2-1-1'
                    },
                    {
                      til: '1-2-1-2'
                    }
                  ]
                },
                {
                  til: '1-2-2'
                }
              ]
            }
          ]
        },
        {
          til: 2
        }
      ]
    }
  },
  components: {
    child, AAA,
    BBB
  }
}
</script>
<style lang="less">
</style>